<template>
  <div id="app">
    <div class="row">
      <LButton @click="fn()">默认按钮</LButton>
      <LButton type="primary">点击</LButton>
      <LButton type="success">点击</LButton>
      <LButton type="info">点击</LButton>
      <LButton type="warning">增加</LButton>
      <LButton type="danger">删除</LButton>
    </div>
    <div class="row">
      <LButton plain>默认按钮</LButton>
      <LButton plain type="primary">primary</LButton>
      <LButton plain ype="success">success</LButton>
      <LButton plain type="info">info</LButton>
      <LButton plain type="warning">warning</LButton>
      <LButton plain="true" type="danger">danger</LButton>
    </div>
    <div class="row">
      <LButton round>默认按钮</LButton>
      <LButton round plain type="primary">primary</LButton>
      <LButton round plain ype="success">success</LButton>
      <LButton round plain type="info">info</LButton>
      <LButton round plain type="warning">warning</LButton>
      <LButton round plain="true" type="danger">danger</LButton>
    </div>
    <div class="row">
      <LButton circle round plain>LU</LButton>
      <LButton circle round plain type="primary">L</LButton>
      <LButton circle round plain ype="success">L</LButton>
      <LButton circle round plain type="info">L</LButton>
      <LButton circle round plain type="warning">L</LButton>
      <LButton circle round plain type="danger">L</LButton>
    </div>
    <div class="row">
      <LButton icon="bluetoothon"></LButton>
      <LButton type="primary" icon="camera"></LButton>
      <LButton type="success" icon="course"></LButton>
      <LButton type="info" icon="bluetooth_link"></LButton>
      <LButton type="danger" icon="addto"></LButton>
      <LButton type="warning" icon="audio"></LButton>
    </div>
    <div class="row">
      <LButton :disabled='false' @click="fn()">默认按钮</LButton>
      <LButton :disabled='true' type="primary">点击</LButton>
      <LButton disabled type="success">点击</LButton>
      <LButton disabled type="info">点击</LButton>
      <LButton disabled type="warning">增加</LButton>
      <LButton disabled type="danger">删除</LButton>
    </div>
    <div class="row">
      <LDialog width="30%" top="100px" :visible.sync="visible">
        <template v-slot:title>
          <h2>我是标题,我想加什么加什么</h2>
        </template>
        <span>这是一段信息</span>
        <template v-slot:footer>
          <LButton @click="visible = false">取消</LButton>
          <LButton type="primary" @click="visible = false">确定</LButton>
        </template>
      </LDialog>
    </div>
    <div>
      <LButton @click="change">打开DIalog</LButton>
    </div>
    <h1>{{ result }}---</h1>
  </div>
</template>

<script>
import { useSpeechRecognition } from '@vueuse/core'
export default {
  components: {
  },
  data () {
    return {
      visible: false,
      result: ''
    }
  },
  created () {
    const {
      isSupported,
      isListening,
      isFinal,
      result,
      start,
      stop
    } = useSpeechRecognition({
      lang: 'cmn-Hans-CN'
      // interimResults: true,
      // continuous: true
    })
    start()
    this.result = result
  },
  methods: {
    fn () {
      console.log('触发了点击事件！！')
    },
    change () {
      this.visible = !this.visible
    }
  }
}
</script>

<style lang="scss" scoped>
.row {
  margin: 25px 5px;

  .l-button {
    margin-left: 5px;
  }
}
</style>
